<template>
    <div class="edit-group-container">
        <edit-shape-box
            :key="groupData.id"
            :data-id="groupData.id"
            :index="groupIndex"
            :item="groupData"
            :hidden-point="true"
            :class="animationsClass(groupData.styles.animations)"
            :style="{
                ...useComponentStyle(groupData.attr,groupIndex),
                ...useSizeStyle(groupData.attr),
                ...getTransformStyle(groupData.styles)
            }"
            @click="mouseClickHandle($event,groupData)"
            @mousedown="mousedownHandle($event,groupData)"
            @mouseenter="mouseenterHandle($event,groupData)"
            @mouseleave="mouseleaveHandle($event,groupData)"
            @contextmenu="handleContextMenu($event, groupData, optionsHandle)"
        >
            <edit-shape-box
                v-for="item in groupData.groupList"
                :key="item.id"
                :data-id="item.id"
                :index="groupIndex"
                :item="item"
                :hidden-point="true"
                :style="{
                    ...useComponentStyle(item.attr,groupIndex),
                }"
            >
                <component
                    class="edit-content-chart"
                    :class="animationsClass(item.styles.animations)"
                    :is="item.chartConfig.chartKey"
                    :chartConfig="item"
                    :themeSetting="themeSetting"
                    :themeColor="themeColor"
                    :style="{
                        ...useSizeStyle(item.attr),
                        ...getTransformStyle(item.styles)
                    }"
                />
            </edit-shape-box>
        </edit-shape-box>
    </div>
</template>

<script setup lang="ts">
import type { CreateComponentGroupType, CreateComponentType } from '@/views/dataview/packages/public/type';
import editShapeBox from '../editShapeBox/index.vue'
import { animationsClass } from '@/utils/style';
import { useComponentStyle, useSizeStyle } from '../hooks/useStyle';
import { colorCustomMerge, getTransformStyle } from '@/utils';
import { computed } from 'vue';
import { useDataViewStore } from '@/stores/dataview';
import { useMouseHandle } from '../hooks/useDrag';
import { handleContextMenu } from '../hooks/useContextMenu';
import { MenuEnum } from '@/enum';

withDefaults(defineProps<{
    groupData:CreateComponentGroupType,
    groupIndex:number
}>(),{})

const {mouseClickHandle,mousedownHandle,mouseenterHandle,mouseleaveHandle} = useMouseHandle()

const dataviewStore = useDataViewStore()

const themeSetting = computed(()=>{
    return dataviewStore.getEditCanvasConfig.chartThemeSetting
})

const optionsHandle = ( targetList: any[],allList: any[],targetInstance: CreateComponentType)=>{
    const filter = (menuList:MenuEnum[])=>{
        return allList.filter((item)=>menuList.includes(item.key))
    }
    if(dataviewStore.getTargetChart.selectId.length > 1){
        return filter([MenuEnum.GROUP,MenuEnum.DELETE])
    }
    const statusMenuEnums :any[]= []
    if(targetInstance.status.lock){
        statusMenuEnums.push(MenuEnum.LOCK)
    }else{
        statusMenuEnums.push(MenuEnum.UNLOCK)
    }
    if(targetInstance.status.hide){
        statusMenuEnums.push(MenuEnum.HIDE)
    }else{
        statusMenuEnums.push(MenuEnum.SHOW)
    }
    const singleMenuEnums = [MenuEnum.UN_GROUP]
    return [...filter(singleMenuEnums),...targetList.filter((item)=>!statusMenuEnums.includes(item.key))]
}

// 自定义颜色合并
const themeColor = computed(()=>{
    const mergeData =  colorCustomMerge(dataviewStore.getEditCanvasConfig.chartCustomThemeColorInfo)
    return mergeData[dataviewStore.getEditCanvasConfig.chartThemeColor]
})
</script>

<style lang='scss' scoped>

</style>